// 门禁设备
import { PropType, defineComponent, reactive, ref } from "vue";
import { ElImage, ElTag } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import img1 from "@/assets/images/iot/device/1.png";
import "./index.scss";
import { ColumnProps } from "@/components/ProTable/interface";
import { DataChart } from "@/components/Chart/interface";
import { dayjs } from "element-plus";
import door from "@/assets/images/iot/snapshot/2.png";
const Access = defineComponent({
	name: "Access", // 动态引入需要
	label: "门禁", // 动态引入需要
	image: door, // 动态引入需要
	props: {
		detail: {
			type: Object as PropType<Device.ResDeviceInfo>,
			default() {
				return {};
			}
		}
	},
	setup(props) {
		const data = reactive({
			columns: [
				{ label: "头像", prop: "image", width: "90px", search: { slot: {} } },
				{ label: "姓名", prop: "personName" },
				{ label: "时间", prop: "time", width: 170 },
				{ label: "状态", prop: "status", search: { slot: {} } }
			] as ColumnProps[],
			initParam: {
				idSn: props.detail.sn,
				key: "data",
				keyType: "sensor"
			} as any,
			dateTraffic: [dayjs().subtract(15, "d"), dayjs()],
			// dateHuman: [dayjs().subtract(7, "d"), dayjs()],
			echartOption: {
				legend: {
					show: false
				},
				toolbox: {
					show: false
				},
				xAxis: {
					axisLine: {
						show: false
					}
				},
				grid: {
					top: 50,
					right: 15
				}
			}
		});
		const trafficChart = ref();
		// const humanChart = ref();
		const getTableList = (p: any) => {
			if (props.detail.sn) {
				return getHistoryDataList({
					idSn: props.detail.sn,
					key: "data",
					keyType: "sensor",
					pageIndex: p.pageIndex || 1,
					pageSize: 10,
					timeOrder: "desc"
				} as any);
			} else {
				return { result: { records: [] } };
			}
		};
		const dataCallback = (res: any) => {
			let list = res.records;
			if (list && list.length) {
				list = list.map((el: any) => Object.assign(el.value?.accessControl || {}, { time: el.updateTime }));
			}
			return {
				datalist: list,
				total: res.total || 0,
				pageIndex: res.current,
				pageSize: res.size
			};
		};
		const handleChange = () => {};

		onMounted(() => {
			init();
			mittBus.on("clickRefreshDeviceDetail", () => {
				init();
			});
		});
		onBeforeUnmount(() => {
			mittBus.off("clickRefreshDeviceDetail");
		});
		const { featchHistory } = useSensorHistory(props.detail.sn, "dayCount");

		const init = async () => {
			let chartData: DataChart.DataList = { dataList: [] };
			let res = await featchHistory({
				startTime: dayjs(data.dateTraffic[0]).format(),
				endTime: dayjs(data.dateTraffic[1]).format()
			});
			let result = (res.result as any) || [];
			let obj: any = {};
			result.map((item: any) => {
				obj[dayjs(item.updateTime).format("YYYY-MM-DD")] = item.value;
			});
			let arr: any = [];
			for (let key in obj) {
				arr.push({ time: key, value: obj[key] });
			}
			chartData.dataList = arr;
			echartBase(trafficChart.value, chartData.dataList, "人流量");
			// echartBase(humanChart.value, chartData.dataList, "人流量");
		};
		return () => {
			return (
				<div class="flex">
					<div class="flex-col access flex-1 mr-5">
						<div class="access-item">
							<ElImage src={img1} class="h-full w-full" fit="scale-down" />
						</div>

						<div class="access-item1 bg-white">
							<div class="page-title justify-between flex flex-grow-0">
								{props.detail.name}人流量统计
								<div style="width: 240px" class="flex">
									<el-date-picker
										type="daterange"
										v-model={data.dateTraffic}
										onChange={() => {
											init();
										}}
									/>
								</div>
							</div>
							<div ref={trafficChart} style="flex:1"></div>
							<div class="chartTitle">人流量</div>
							<div class="bckColor">
								<div class="left"></div>
								<div class="right"></div>
							</div>
						</div>
						{/* <div class="access-item1 bg-white">
						<div class="page-title justify-between flex">
							日人力统计
							<div style="width: 240px" class="flex">
								<ElDatePicker type="daterange" v-model={data.dateHuman} />
							</div>
						</div>
						<div ref={humanChart} style="flex:1"></div>
						<div class="chartTitle">人流量</div>
						<div class="bckColor">
							<div class="left"></div>
							<div class="right"></div>
						</div>
					</div> */}
					</div>
					<div class="access flex-1 ">
						<div class="access-item bg-white" style="height: calc(100vh - 220px);">
							<div class="page-title">事件列表</div>
							<div style="height: calc(100% - 25px);">
								<ProTable
									custSearch
									columns={data.columns}
									requestApi={getTableList}
									initParam={data.initParam}
									dataCallback={dataCallback}
									onSortChange={handleChange}
									toolButton={false}
									layout="total, prev, pager, next, jumper"
								>
									{{
										image: (scope: any) => {
											return (
												<ElImage
													src={scope.row.facePhoto}
													previewSrcList={[scope.row.facePhoto]}
													previewTeleported={true}
													zIndex={9999}
													hideOnClickModal={true}
													class="iconImage"
												/>
											);
										},
										status: (scope: any) => {
											return scope.row.status == "success" ? (
												<ElTag type="success">成功</ElTag>
											) : (
												<ElTag type="danger">失败</ElTag>
											);
										}
									}}
								</ProTable>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
export default Access;

import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";
import { getHistoryDataList } from "@/api/modules/iot/data";
import { Device } from "@/api/interface/iot";
import { useSensorHistory } from "@/hooks/useSensorHistory";
import mittBus from "@/utils/mittBus";
const echartBase = (chart: any, data: any, title: string) => {
	let myChart: echarts.ECharts;
	myChart = echarts.init(chart);
	const xAxisData = [] as any;
	const yAxisData = [] as any;
	if (data && data.length) {
		data.map((el: any) => {
			xAxisData.push(el.time);
			yAxisData.push(el.value);
		});
	}
	const param = {
		title: {
			show: false,
			text: "img-" + Date.now(),
			subtext: "", //`水位趋势（${queryFrom.timeRange[0]} ~ ${queryFrom.timeRange[1]}）`,
			top: "20",
			left: "50%",
			textAlign: "center"
		},
		color: ["#82E28D"],

		dataZoom: [
			{
				show: false,
				start: 0,
				end: 100
			},
			{
				type: "inside",
				start: 0,
				end: 100
			}
		],
		tooltip: {
			trigger: "axis"
		},
		xAxis: [
			{
				axisLine: { show: false, lineStyle: { color: "#333" } },
				axisLabel: { textStyle: { color: "#000000" } },
				axisTick: { show: false },
				data: xAxisData,
				type: "category",
				boundaryGap: false
			}
		],
		yAxis: [
			{
				type: "value",
				splitLine: { show: true, lineStyle: { color: "#ccc", type: "dashed" } },
				axisLine: { show: false, lineStyle: { color: "#333" } },
				axisTick: { show: false },
				axisLabel: { color: "#999999" }
			}
		],
		grid: {
			left: 20,
			right: 40,
			bottom: "5%",
			top: "15%",
			containLabel: true
		},
		series: [
			{
				type: "line",
				smooth: true,
				name: title,
				// 折线图线条颜色
				lineStyle: {
					color: "#82E28D",
					width: 4
				},
				// showSymbol: false,
				//区域图-背景
				areaStyle: {
					color: "rgba(130, 226, 141, 0.4)"
				},
				//柱状图-柱子背景(饼图需要置空，否则无法区分)
				symbol: "none",
				data: yAxisData
			}
		]
	};
	useEcharts(myChart, param);
};
